<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>消费分析</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../elementUI/index.css">
  <link rel="stylesheet" href="../../../css/index.css">
</head>
<style>
  .title {
    height: 50px;
    background-color: rgb(246, 246, 246);
    line-height: 50px;
    text-indent: 2em;
    border-radius: 10px;
    margin-top: 10px;
    font-weight: bold;
  }

  .left {
    width: 50%;
    height: 320px;
    margin: auto;
    /* background-color: aqua; */
  }

  .member {
    height: 40%;
    background-color: rgb(246, 246, 246);
    display: flex;
    margin-top: 20px;
    align-items: center;
    padding-left: 30px;
    /* justify-content: space-around; */
  }

  .member-title {
    width: 30%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mingxi {
    /* margin: 10px; */
    margin-top: 10px;
    font-size: 18px;
    margin-left: 20px;
    /* margin-right: 100px; */
  }

  .eatchs {
    background-color: rgb(246, 246, 246);
    margin-top: 10px;
    margin-left: 100px;
    padding-left: 20px;
    height: 5%;
  }

  .img img {
    width: 90px;
  }
</style>

<body>
  <div id="app" class="minWidth">
    <el-form :inline="true" :form="form">
      <el-date-picker style="margin-left: 20px; margin-right: 20px;" v-model="time" value-format="yyyy-MM-dd"
        @change="DateChange" type="daterange" align="center" unlink-panels range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" :picker-options="pickerOptions">
      </el-date-picker>
      <el-radio v-model="radio" label="1" @change="handlechange">一年内</el-radio>
      <el-radio v-model="radio" label="2" @change="handlechange">本月</el-radio>
      <el-radio v-model="radio" label="3" @change="handlechange">本周</el-radio>
      <el-select placeholder="请选择门店" clearable filterable v-model.trim="form.App_ID" @change="handleclassify">
        <el-option v-for="(item,index) in store" :key="index" :label="item.Store_Name" :value="item.App_ID"></el-option>
      </el-select>
    </el-form>
    <div class="title">客户消费分析</div>
    <div style="display: flex; width: 80%;margin: auto;">
      <div class="left">
        <div class="member">
          <div class="member-title">
            <div>会员消费</div>
            <div class="img"><img src="./image/会员.png" alt=""></div>
          </div>
          <div class="Consumption-amount">
            <div class="mingxi">总消费金额: <span
                style="color: rgb(18, 150, 219);">￥{{thousands(member.Collection_Amount_Rights)}}</span>
            </div>
            <div class="mingxi">总消费笔数: <span style="color: rgb(18, 150, 219);">{{member.Collection_total_Rights}}
                笔</span></div>
            <div class="mingxi">今日消费额: <span
                style="color: rgb(18, 150, 219);">￥{{thousands(member.Collection_Amount_Today_Rights)}}</span></div>
          </div>
        </div>
        <div class="member">
          <div class="member-title">
            非会员消费
            <div class="img"><img src="./image/非会员1.png" alt=""></div>
          </div>
          <div class="Consumption-amount">
            <div class="mingxi">总消费金额: <span
                style="color: rgb(54, 171, 96);">￥{{thousands(member.Collection_Amount)}}</span>
            </div>
            <div class="mingxi">总消费笔数: <span style="color: rgb(54, 171, 96);">{{member.Collection_total}}
                笔</span></div>
            <div class="mingxi">今日消费额: <span
                style="color: rgb(54, 171, 96);">￥{{thousands(member.Collection_Amount_Today)}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="eatchs">
        <div id="ceshi" style="width: 600px;height:250px; margin-top: 50px;"></div>
      </div>
    </div>
    <div class="title">商品消费分析 <span style="font-size: 12px;">(按销售数量排列)</span></div>
    <div style="display: flex; width: 80%; margin: auto; justify-content: space-between;">
      <div style="width: 40%;">
        <div style="margin: 10px;">会员热卖TOP5</div>
        <template>
          <el-table :data="tableData" border>
            <el-table-column type="index" align="center" width="100" label="排行">
            </el-table-column>
            <el-table-column prop="Article_Name" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="Quantity" align="center" label="销量">
            </el-table-column>
            <el-table-column prop="Sales_Amount" align="center" label="销售金额">
              <template v-slot="{row}">
                {{thousands(row.Sales_Amount)}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div style="width: 40%;">
        <div style="margin: 10px;">非会员热卖TOP5</div>
        <template>
          <el-table border :data="ranking">
            <el-table-column type="index" align="center" width="100" label="排行">
            </el-table-column>
            <el-table-column prop="Article_Name" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="Quantity" align="center" label="销量">
            </el-table-column>
            <el-table-column prop="Sales_Amount" align="center" label="销售金额">
              <template v-slot="{row}">
                {{thousands(row.Sales_Amount)}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../js/vue.min.js"></script>
  <script type="text/javascript" src="../../../elementUI/index.js"></script>
  <script type="text/javascript" src="../../../js/utils.js"></script>
  <script type="text/javascript" src="./js/echarts.min.js"></script>
  <script type="text/javascript" src="./js/ConsumptionAnalysis.js"></script>
  <script>
    // mychart()
    // function mychart(data) {
    //   var myChart = echarts.init(document.getElementById('ceshi'));
    //   option = {
    //     title: {
    //       text: '消费占比',
    //       left: 'center'
    //     },
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     legend: {
    //       orient: '会员',
    //       left: 'left'
    //     },
    //     color: ['rgb(18, 150, 219)', 'rgb(54, 171, 96)'],
    //     series: [

    //       {
    //         type: 'pie',
    //         name: '销售量',
    //         radius: '50%',
    //         data: [
    //           { value: 1048, name: '会员' },
    //           { value: 735, name: '非会员' },
    //         ],
    //         label: {
    //           formatter: '{b} : {c} ({d}%)'
    //         }
    //         // formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
    //       },


    //     ],
    //   }
    //   myChart.setOption(option);
    // }
  </script>
</body>

</html>